/*
 * @Description: 储蓄卡表单
 * @Author: tao.xie
 * @Date: 2019-03-21 11:26:31
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-04-01 15:56:17
 */

<template>
  <div>
    <!-- 银行卡输入 -->
    <bind-form-base-input
      ref="cardinput"
      @input="handleBankCardInputChangeEvent"
      name="银行卡号"
      placeHolder="请输入本人同名银行卡"
      :split="4"
      :maxLength="23"
    />
    <!-- 手机号码输入 -->
    <bind-form-base-input
      @input="handlePhoneNoInputChangeEvent"
      name="预留手机号"
      placeHolder="请输入预留手机号"
      ref="phoneinput"
    />
    <!-- 验证码输入 -->
    <bind-form-base-input
      ref="msginput"
      @input="handleVericationCodeInputChangeEvent"
      name="验证码"
      placeHolder="请输入6位验证码"
      :showDeleteIcon="false"
      :maxLength="6"
    >
      <get-valid-code-button
        @vclick="_willSendBindCardMsg"
        ref="getValidVodeButton"
      />
    </bind-form-base-input>

    <!-- 同意协议 -->
    <agreement
      class="
        agreement"
      ref="agreement"
    />

    <!-- 绑定按钮 -->
    <button
      class="bind-btn"
      :class="isBindButtonActive?'baseBgColorWithActive':'baseBgColorInvalid'"
      :disabled="!isBindButtonActive"
      @click="bind"
    >绑定</button>
  </div>

</template>

<script>
import BindFormBaseInput from './input/BindFormBaseInput'
import GetValidCodeButton from './input/GetValidCodeButton'
import Agreement from './Agreement'
import { validPhoneNo, validBankCardNo, validVercationCode } from '../utils/StringValidUtils.js'
import { sendBindCardMsg, bindDebitCard } from '../api/api.js'
import BindResultJS from './BindResultJS.js'

export default {
  components: {
    'bind-form-base-input': BindFormBaseInput,
    'get-valid-code-button': GetValidCodeButton,
    'agreement': Agreement
  },
  data() {
    return {
      currentInputBankCardNo: '',
      currentInputPhoneNo: '',
      currentVericationCode: '',
      isBindButtonActive: false,
      bindCardOrderNo: ''
    }
  },
  methods: {
    handleBankCardInputChangeEvent(cardno) {
      this.currentInputBankCardNo = cardno
      this.validForm()
    },
    handlePhoneNoInputChangeEvent(phoneno) {
      this.currentInputPhoneNo = phoneno
      this.validForm()
      validPhoneNo(this.currentInputPhoneNo).then(() => {
        this.$refs.phoneinput.changeToWarnBorder(false)
      }).catch(() => {
        this.$refs.phoneinput.changeToWarnBorder(true)
      })
    },
    handleVericationCodeInputChangeEvent(vericationcode) {
      this.currentVericationCode = vericationcode
      this.validForm()
    },
    validForm: function () {
      Promise.all([validBankCardNo(this.currentInputBankCardNo), validPhoneNo(this.currentInputPhoneNo), validVercationCode(this.currentVericationCode)]).then(data => {
        this.isBindButtonActive = true
      }).catch(() => {
        this.isBindButtonActive = false
      })
    },
    _willSendBindCardMsg: function () {
      Promise.all([validBankCardNo(this.currentInputBankCardNo), validPhoneNo(this.currentInputPhoneNo)]).then(data => {
        this._sendBindCardMsg()
      }).catch(err => {
        this.$toastMsg(err.message)
      })
    },
    _sendBindCardMsg: async function () {
      try {
        let rs = await sendBindCardMsg(this.currentInputPhoneNo, this.currentInputBankCardNo)
        this.bindCardOrderNo = rs
        this.$refs.getValidVodeButton.run()
        this.$toastMsg('验证码已发送')
      } catch (err) {
        this.$refs.getValidVodeButton.reset()
      }
    },
    bind: async function () {
      if (this.$refs.agreement.isChoosed()) {
        try {
          await bindDebitCard(this.currentVericationCode, this.bindCardOrderNo, this.currentInputPhoneNo, this.currentInputBankCardNo)
          BindResultJS.show()
        } catch (err) {
        }
      } else {
        this.$toastMsg('请阅读并同意快捷支付协议！')
      }
    },
    // 清空所有输入框
    clearAllInput() {
      this.$refs.cardinput.clear()
      this.$refs.phoneinput.clear()
      this.$refs.msginput.clear()
    }
  }
}
</script>

<style scoped>
/* 同意条款 */
.agreement {
  margin-top: 84px;
}
/* 绑定按钮 */
.bind-btn {
  width: 690px;
  height: 80px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px; /*no*/
  line-height: 21px; /*no*/
  margin: 22px 0px 30px 30px;
}
</style>
